<template>
  <div class="map-container">
    <div id="grid-map-container"></div>
  </div>
</template>

<script>

  const AMap = window.AMap;
  export default {
    name: 'MarkerAndPolyShowMap',
    props: {
      lng: {
        type:String,
      },
      lat: {
        type:String,
      },
      showMarker: {
        type: Boolean,
        default: true
      },
      showPoly:{
        type: Boolean,
        default: true
      },
      domains:{
        type:String
      }
    },
    data() {
      return {
        center: [this.lng,this.lat],
        zoom: 16,
        // 线条颜色
        strokeColor: '#176ffc',
        // 线条透明度
        strokeOpacity: 0.6,
        // 线条宽度
        strokeWeight: 1,
        // 填充颜色
        fillColor: '#1791fc',
        // 填充透明度
        fillOpacity: 0.4,
        path: [],
        map: undefined,
        polygon: undefined,
        // 地图右键菜单
        contextMenu: undefined,
        // 地图点击事件监听
        clickListener: undefined,
        // 输入提示组件id
        autoOptions: {
          input: 'tipinput'
        },
        // 地图输入提示插件
        mapAutoComplete: undefined,
        // 地图输入提示点击监听
        autoCompleteSelectListener: undefined,
        // 地图地点查询类
        placeSearch: undefined,
        // 圆点标识，用于显示网格区域顶点
        circleMarker: [],
        mapSearch: {
          key: '',
          city: '泉州'
        },
      };
    },
    watch: {
      defaultValue() {
        this.searchValue = this.defaultValue;
      },
      lng(){
        if(this.domains==undefined||this.domains==''){
          if(this.map){
            this.center=[this.lng,this.lat];
            this.map.setCenter(this.center);
          }
        }
      }
    },
    mounted() {
      // 初始化地图页面
      this.initMap();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      /** 二维数组转字符串 **/
      doubleDiaArray2Str(array) {
        let arrLen = array.length
        let row = '['
        for (let i = 0; i < arrLen; i++) {
          row += '['
          for (let j = 0; j < array[i].length; j++) {
            row += array[i][j]
            if (j < array[i].length - 1) {
              row += ','
            }
          }
          row += ']'
          if (i < arrLen - 1) {
            row += ','
          }
        }
        row += ']'
        return row
      },
      /** 字符串转二维数组 **/
      str2DoubleDiaArray(str) {
        if (str != undefined && str != null && str.length > 0) {
          return eval(str)
        }
      },
      /** 初始化map **/
      initMap() {
        // if (!this.map) {
        if(this.lng&&this.lng!=''&&this.lat&&this.lat!=''){
          this.center=[this.lng,this.lat];
        }
        else{
          this.center=[118.675807, 24.872481];
        }
        this.map = new AMap.Map('grid-map-container', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: this.zoom, //初始化地图层级
          center: this.center //初始化地图层级
        })
        // }
        let that = this
        // 地图加载完成的回调
        this.map.on('complete', function() {
          if(that.showPoly){
            that.loadGridScope()
          }
          if(that.showMarker&&that.lng&&that.lng!=''&&that.lat&&that.lat!=''){
            let lnglat=[that.lng,that.lat];
            that.setMarker(lnglat);
          }

        })
      },
      /** 在地图上加载网格范围 **/
      loadGridScope() {
        let that = this
        if (this.map && this.domains != undefined && this.domains.length > 0) {
          // 将网格区域显示在地图上
          this.path = this.str2DoubleDiaArray(this.domains)
          let pathTmp = []
          Object.assign(pathTmp, this.path)
          this.addPolygon(pathTmp)
          // 将地图中心移动到此处
          this.map.setCenter(this.path[0])
          // this.map.setZoom(15);
          this.map.setFitView([this.polygon])

          /*//编辑网格区域时，取消鼠标点击监听
          this.polygonEditorListener();*/
        }
      },
      /** 地图定位缩放初始化 **/
      reLocation() {
        if (this.map && this.operationType == 1) {
          if(this.polygon){
            this.map.setFitView([this.polygon])
          }else{
            this.map.setZoom(this.zoom)
          }
          this.map.setCenter(this.center)
        }
      },
      // 新增maker
      setMarker(lnglat) {
        this.marker = new AMap.Marker({
          title: this.title,
          icon: new AMap.Icon({
            size: new AMap.Size(19, 33),
            image: "../../../../mark_red.png",
            imageSize: new AMap.Size(19, 33)
          })
        });
        this.marker.setPosition(lnglat);
        this.map.add(this.marker);
        let that = this;
      },
      addPolygon(path) {
        if (this.polygon) {
          this.map.remove(this.polygon)
          this.polyEditor = undefined;
        }
        let polygontmp = new AMap.Polygon({
          path: path,
          strokeColor: this.strokeColor,
          strokeWeight: this.strokeWeight,
          strokeOpacity: this.strokeOpacity,
          fillOpacity: this.fillOpacity,
          fillColor: this.fillColor
        })
        let that = this
        this.polygon = polygontmp
        this.map.add(polygontmp)
      },
    }
  }
</script>

<style scoped>
  #grid-map-container {
    height: 500px;
    margin:  10px 0px 10px 0px;
  }

  ul.amap-menu-outer li {
    color: gray;
  }
  .map-container {

  }



</style>
